<template>


        <div class="super_container">

                
            
                <!-- Home -->

                <!--包含头部和左侧菜单-->

                <myheader></myheader>
            
                
            
                <div class="boxes">
                    <div class="section_container">
                        <div class="container">
                            {{msg}}
                            用户名：<el-input v-model="name" placeholder="用户名"></el-input>
                            密码：<el-input type="password" v-model="password" placeholder="密码" show-password></el-input><br>
                            确认密码：<el-input type="password" v-model="password1" placeholder="确认密码" show-password></el-input>
                            <br>
                            手机号：<el-input placeholder="请输入手机号" v-model="phone"></el-input>
                            <br>
                            验证码：<el-input placeholder="请输入验证码" v-model="code"></el-input>
                            <br>
                            <el-button @click="countDown" :disabled="isDisabled">{{ content }}</el-button>
                            <br>
                            邮箱地址：<el-input placeholder="请输入QQ邮箱地址" v-model="email"></el-input>
                            <br><br>
                            <el-button @click='getApiData_post'>注册</el-button>
                            <br>
                            <br>
                            <br>
                            <br>
                            <br>
                            <br>
                            <br>
                            <br>
                            <br>
                            <br>
                            <br>
                            <br>
                            <br>
                            <br>
                            <br>
                            <br>
                            <br>
                            <br>
                            <br>
                            <br>
                            <br>
                            <br>
                            <br>
                            <br>
                            <br>

                        </div>
                    </div>
                </div>
               
            
                

                <myfooter></myfooter>
            
            
            </div>

      
</template>
      
      
      
       
      <script>



        import myheader from './header.vue'
        import myfooter from './footer.vue'
     
      
      export default {
        data () {
          return {
            email:'',
            isDisabled:false,
            code:'',
            phone:'',
            content:'发送验证',
            name:'',
            password:'',
            password1:'',
            input:'',
            msg: "",
            dataList:[],
            clicked:0,
            upath: '',
            result: '',
            uping:0
          }
        },
        components: {
        'myheader':myheader,
        'myfooter':myfooter
        },
        mounted:function(){

            this.common.get_menu();
            
        
      
      },
        methods:{
            changetest(index){
                this.clicked = index;
            },getApiData_get:function() {
             //设置请求路径
             var url  = this.base_url+"/RegisterHandler";                
             // 发送请求:将数据返回到一个回到函数中
             var _this= this;
             // 并且响应成功以后会执行then方法中的回调函数
             this.axios.get(url,{
                params: { 
                    name: '',
                    passqord:'',
                    passqord1:'',
                    phone:'',
                    code:'',
                }
            }).then(function(result) {

                    console.log(result);
                    //_this.name = result.data.message[0].name;
                        });    
                        },
        

        // 定义异步post方法 getApiData_post
        getApiData_post:function(){
            // 定义url
            var url = this.base_url+'/RegisterHandler';

            //定义中介
            var _this = this;
            //使用axios发送异步请求
            this.axios.post(url,this.qs.stringify({
                name:this.name,password:this.password,password1:this.password1,phone:this.phone,code:this.code,email:this.email}))
            .then(function(result){
                console.log(result);
                _this.msg=result.data.msg;
                if(result.data.status == 200){
                    _this.$router.push({path:'/activate'})
                    // _this.$router.push({path:'/login'})
                }
            });
            },

            countDown:function(){
                var url = this.base_url+'/Send_Data';
                this.totalTime = 60
                this.isDisabled = true;   
                this.content = this.totalTime + "s后重新发送" //这里解决60秒不见了的问题
                let clock = window.setInterval(() => {
                this.totalTime--
                this.content = this.totalTime + "s后重新发送"
                if (this.totalTime < 0) { //当倒计时小于0时清除定时器
                    this.content = '重新发送验证码'
                    this.isDisabled = false
                    window.clearInterval(clock)
                }
                },1000)
                this.axios.post(url,this.qs.stringify({
                    phone:this.phone,
                })).then(function(result){
                    console.log(result)
                    if(result.data.status == 200){
                    alert(result.data.msg)
                    }else{
                    alert(result.data.msg)
                }
                })
                }

        },
        
      }
      
      
      </script>
       
      <style>
      
      
      
      </style>